import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    Platform,
    Image,
    TextInput,
    Button,
    View
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class searchPage extends Component {
    constructor(props) {
        super(props);
        this.state = { text: '' };
    }
    updateText(text) {
        this.setState({text})
        console.log(text)
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.searchContainer}>
                    <View style={styles.searchBox}>
                        <Icon
                            style={styles.searchIcon}
                            name={'search'} // 图标 调用传入的属性
                            size={22}
                        />
                        <TextInput style={styles.inputText}
                                   placeholderTextColor={'#aaa'}
                                   onSubmitEditing={this.props.value}
                            // onSubmitEditing={(text) => this.updateText(text)}
                            // value={this.state.text}
                                   keyboardType='web-search'
                                   placeholder='搜索文件夹/文件' />
                    </View>
                    <Button color="#fff" onPress={() => Actions.home()} title={'取消'}/>
                </View>
                <Text style={styles.title}>——— 搜索文件夹/文件 ———</Text>
            </View>)
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    title: {
        color: '#999'
    },

    //search
    searchContainer: {
        flexDirection: 'row',   // 水平排布
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: Platform.OS === 'ios' ? 20 : 0,  // 处理iOS状态栏
        height: Platform.OS === 'ios' ? 68 : 48,   // 处理iOS状态栏
        backgroundColor: '#629efe',
        alignItems: 'center'  // 使元素垂直居中排布, 当flexDirection为column时, 为水平居中
    },
    logo: {//图片logo
        height: 24,
        width: 64,
        resizeMode: 'stretch'  // 设置拉伸模式
    },
    searchBox:{//搜索框
        height:30,
        flexDirection: 'row',   // 水平排布
        flex:1,
        borderRadius: 5,  // 设置圆角边
        backgroundColor: 'white',
        alignItems: 'center',
        marginLeft: 8,
        marginRight: 8,
    },
    searchIcon: {//搜索图标
        marginLeft: 5,
        color: '#629efe'
    },
    inputText:{
        flex:1,
        padding: 0,
        paddingLeft: 5,
        backgroundColor:'transparent',
        fontSize:15,
    },
    cancelButt: {
        color: '#fff'
    },
    voiceIcon: {
        marginLeft: 5,
        marginRight: 8,
        width: 15,
        height: 20,
        resizeMode: 'stretch'
    },
    scanIcon: {//搜索图标
        height: 26.7,
        width: 26.7,
        resizeMode: 'stretch'
    },
});


